<template>
  <div class="main">
    <a href="/">返回首页</a>
    <div class="title">
      <a class="active" href="/login">登录</a>
      <span>·</span>
      <a href="/register">注册</a>
    </div>
    <div class="sign-up-container">
      <el-form ref="userForm" :model="user">
        <el-form-item
          class="input-prepend restyle"
          prop="mobile"
          :rules="[
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { validator: checkPhone, trigger: 'blur' },
          ]"
        >
          <div>
            <el-input type="text" placeholder="手机号" v-model="user.mobile" />
            <i class="iconfont icon-phone" />
          </div>
        </el-form-item>
        <el-form-item
          class="input-prepend"
          prop="password"
          :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
        >
          <div>
            <el-input
              type="password"
              placeholder="密码"
              v-model="user.password"
            />
            <i class="iconfont icon-password" />
          </div>
        </el-form-item>
        <div class="btn">
          <input
            type="button"
            class="sign-in-button"
            value="登录"
            @click="submitLogin()"
          />
        </div>
      </el-form>
      <!-- 更多登录方式 -->
      <div class="more-sign">
        <h6>社交帐号登录</h6>
        <ul>
          <li>
            <a
              id="weixin"
              class="weixin"
              target="_blank"
              :href="baseURL+'api/ucenter/wx/login'"
              ><i class="iconfont icon-weixin"
            /></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import "~/assets/css/sign.css";
import "~/assets/css/iconfont.css";
import cookie from "js-cookie";
import userApi from '@/api/user'
import { baseUrl } from '@/utils/index'
export default {
  layout: "sign",
  data() {
    return {
      baseURL:null,
      user:{
        mobile:null,
        password:null
      },
      loginInfo:null
    };
  },
  created () {
    this.baseURL = baseUrl;
  },
  methods: {
    // 手机号码校验
    checkPhone(rule, value, callback) {
      if (
        !/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/.test(
          value
        )
      ) {
        return callback(new Error("手机号码格式不正确"));
      }
      return callback();
    },
    async submitLogin() {
      let res = await userApi.loginUser(this.user);
      if(res.success) {
        let token = res.data.token
        cookie.set('guli_token',token,{domin:'localhost'})

        userApi.getMemberInfo().then(response => {
          // 获取返回的用户信息 返回到cookie里
          this.loginInfo = response.data.userInfo
          cookie.set("guli_ucenter",this.loginInfo,{domain:'localhost'})

          this.$message.success("登录成功")
          this.$router.push("/")
        })

      }else {
        return this.$message.error(res.msg)
      }
    }
  },
};
</script>
<style>
.el-form-item__error {
  z-index: 9999999;
}
</style>